<template>
  <div class="commonBody">
    <!--列表：搜索框-->
    <div class="searchBody" v-if="showPage">
      <div class="leftSearch" :style="{ width: '85%' }">
        <el-form :model="searchForm" ref="searchFormRef" class="searchForm">
          <div class="leftSearch">
            <el-form-item label="分类名称" prop="name">
              <el-input
                class="inputWidth"
                v-model="searchForm.name"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="创建时间"
              class="dateSearchItem"
              prop="createTime"
            >
              <el-date-picker
                v-model="searchForm.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="分类名称" prop="name">
              <el-input
                class="inputWidth"
                v-model="searchForm.name"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>

        <div class="rightSearch" :style="{ width: '15%' }">
          <el-button type="primary" size="default" @click="pageSearch"
            >搜索</el-button
          >
          <el-button @click="pageReset" size="default">重置</el-button>
        </div>
      </div>

      <div class="btnBody">
        <el-button
          class="btnNormal"
          type="primary"
          icon="plus"
          size="default"
          @click="edit(1)"
          >新增</el-button
        >
        <el-tooltip class="refreshBtn" effect="dark" content="刷新页面">
          <el-button type="text" @click="refreshTable">
            <el-icon :size="20" class="refreshIcon"><refresh /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <div v-permission="['category/list']" v-if="showPage">
      <c-table
        ref="tableRef"
        :pageData="pageData"
        :loading="tableLoading"
        @pageCurrentChange="pageCurrentChange"
        @pageSizeChange="pageSizeChange"
      >
        <el-table-column
          prop="name"
          label="分类名称"
          min-width="150"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          width="80"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column
          prop="isShow"
          label="是否显示"
          width="100"
          align="center"
          :resizable="false"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="级别"
          width="150"
          align="center"
          :resizable="false"
        >
          <template #default="scope">
              <el-tag
                :type="scope.row.level === 1 ? 'danger' : (scope.row.level === 1?'warning':'success')"
                >{{ scope.row.level === 1 ? '顶级分类' : scope.row.level+'级分类' }}
            </el-tag>
          </template>
                
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="100"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          min-width="100"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="default"
              @click="edit(3, scope.row)"
              icon="view"
              >详情
            </el-button>
            <el-button
              type="primary"
              plain
              size="default"
              @click="edit(2, scope.row)"
              icon="editPen"
              >修改
            </el-button>
            <span class="deleteBtn" @click.stop="() => {}">
              <del-model
                :delData="scope.row"
                btnText="删除"
                cancelText="取消"
                confirmText="确定"
                titleText="确定要删除该项吗?"
                popWidth="300"
                delIcon="delete"
                @cancel="onCancel"
                @confirm="del"
              ></del-model>
              <!-- <el-popconfirm
                width="300"
                icon-color="#dc2626"
                title="确定要删除该项吗?"
                @cancel="onCancel"
                @confirm="del(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" plain size="default" icon="delete"
                    >删除
                  </el-button>
                </template>
                <template #actions="{ confirm, cancel }">
                  <el-button size="default" @click="cancel">取消</el-button>
                  <el-button type="danger" size="default" @click="confirm">
                    确定
                  </el-button>
                </template>
              </el-popconfirm> -->
            </span>
          </template>
        </el-table-column>
      </c-table>
    </div>

    <div class="searchBody" v-if="!showPage">
      <div class="leftSearch" :style="{ width: '85%' }">
        <el-form :model="searchForm" ref="searchFormRef" class="searchForm">
          <el-switch
            class="switchDrag"
            v-model="switchDraggable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            active-text="开启拖拽"
            inactive-text="关闭拖拽"
            @change="changeDrag(switchDraggable)"
          ></el-switch>

          <el-button
            v-if="switchDraggable"
            size="default"
            type="primary"
            class="switchDragSave"
            @click="saveDrag"
            >拖拽保存
          </el-button>

          <!-- <el-button type="danger" class="switchDragBtn" @click="batchDel"
            >批量删除</el-button> -->
        </el-form>
      </div>

      <div class="btnBody">
        <el-button
          class="btnNormal"
          type="primary"
          icon="plus"
          size="default"
          @click="edit(1)"
          >新增</el-button
        >
        <el-tooltip class="refreshBtn" effect="dark" content="刷新页面">
          <el-button type="text" @click="refreshTable">
            <el-icon :size="20" class="refreshIcon"><refresh /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <div v-permission="['category/tree']" v-if="!showPage" class="treeBody">
      <div
        class="categoryTree"
        :style="{ height: treeHeight }"
        v-loading="treeLoading"
      >
        <!--hasPermission('sys:office:edit') show-checkbox-->
        <!-- tree属性配置
				  	node-key：树结构中每个节点的唯一id
				  	check-strictly：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
				  	props：指定tree可分配的四个值：
				  		1.label（标签）
				  		2.children（子节点）
				  		3.disabled（指定节点选择框是否禁用为节点对象的某个属性值）
				  		4.isLeaf（指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效）
				  		5.class（自定义节点类名）
				  	default-expanded-keys：页面在初始化时，默认展开的节点
				  	draggable：全局是否可拖拽
				  	allow-drag：当前节点是否可拖拽
				  	allow-drop：节点被拖拽时，获取（当前节点，拖拽至目标节点，当前节点相对于目标节点的前prev、后next、内部inner位置）
				  	highlight-current：是否高亮当前选中节点，默认值是 false
				  	expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
				  	check-on-click-node：是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
				  	filter-node-method：对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏
				  	@node-click:节点被点击时触发。四个参数：=点击的节点对象，TreeNode 的 node 属性, TreeNode，和 事件对象
				  	@node-drop：拖拽成功完成时触发的事件。共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
				  	load: 加载子树数据的方法，仅当 lazy 属性为true 时生效,function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
				  -->
        <div class="leftTree">
          <el-tree
            ref="catTree"
            node-key="uniId"
            :data="treeData"
            check-strictly
            :props="treeProps"
            :default-expanded-keys="expendedKeys"
            :draggable="switchDraggable"
            :allow-drag="allowDragNode"
            :allow-drop="allowDropNode"
            @node-drag-end="dropEnd"
            highlight-current
            :expand-on-click-node="false"
            :check-on-click-node="true"
            :filter-node-method="filterNode"
            @node-click="nodeClick"
            @node-drop="nodeDrop"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node el-tree-node__label">
                <span class="label" :class="''">
                  {{ node.label }}
                </span>
                <span class="do">
                  <el-icon
                    :color="$settings.info"
                    @click.stop="edit(1, data)"
                    :size="25"
                    ><plus></plus>
                  </el-icon>
                  <!-- <el-icon
                    :color="$settings.info"
                    @click.stop="edit(node, data)"
                    :size="25"
                    ><Edit></Edit>
                  </el-icon> -->
                  <delModel :disable="true"
                    :delData="data"
                    :btnType="2"
                    btnText="删除"
                    cancelText="取消"
                    confirmText="确定"
                    titleText="确定要删除该项吗?"
                    popWidth="300"
                    delIcon="delete"
                    @cancel="onCancel"
                    @confirm="del(data)"></delModel>
                  <!-- <el-icon
                    :color="$settings.info"
                    @click.stop="del(node, data)"
                    :size="25"
                    ><DeleteFilled></DeleteFilled>
                  </el-icon> -->
                </span>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="rightContent">
          <el-descriptions
            class="treeDetailBox"
            v-if="!treeEdit"
            :title="currentTree.name"
            direction="horizontal"
            :column="1"
            :size="size"
            border
          >
            <template #extra>
              <el-button
                icon="edit"
                plain
                type="primary"
                @click="treeEditHandle"
              >
                修改
              </el-button>
            </template>
            <!-- <el-descriptions-item label="uniId">{{
              currentTree.uniId
            }}</el-descriptions-item> -->
            <el-descriptions-item label="分类名称">{{
              currentTree.name
            }}</el-descriptions-item>
            <el-descriptions-item label="排序" :span="2">{{
              currentTree.sort
            }}</el-descriptions-item>
            <el-descriptions-item label="是否显示" :span="2">{{
              currentTree.isShow == 1 ? "显示" : "不显示"
            }}</el-descriptions-item>
            <el-descriptions-item label="所属父级" :span="2">{{
              currentTree.parentId == 0
                ? "一级分类"
                : currentTree.parentName
                ? currentTree.parentName
                : "父级异常"
            }}</el-descriptions-item>
            <el-descriptions-item label="分类级别">
              <el-tag  size="small"
                :type="currentTree.level === 1 ? 'danger' : (currentTree.level === 1?'warning':'success')"
                >{{ currentTree.level === 1 ? '顶级分类' : currentTree.level+'级分类' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间"
              >{{ currentTree.createTime ? currentTree.createTime : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间"
              >{{ currentTree.updateTime ? currentTree.updateTime : "-" }}
            </el-descriptions-item>
          </el-descriptions>

          <div class="treeEditBox" v-else>
            <div class="topTitle">
              <div class="leftTitle">{{ currentTree.name }}</div>
              <div class="rightOpt">
                <el-button
                  :icon="treeEdit ? 'back' : 'edit'"
                  plain
                  type="primary"
                  @click="treeEdit = !treeEdit"
                >
                  {{ treeEdit ? "取消" : "修改" }}
                </el-button>
              </div>
            </div>
            <el-form :style="{height:treeFormHeight,overflow:'auto'}"
              ref="formRef"
              :rules="inputRules"
              :model="inputForm"
              :disabled="modalTitle == '详情'"
              :hide-required-asterisk="false"
            >
              <el-form-item
                label="分类名称"
                prop="name"
                :label-width="formLabelWidth"
              >
                <el-input v-model="inputForm.name" autocomplete="off" clearable>
                </el-input>
              </el-form-item>

              <el-form-item
                label="排序"
                prop="sort"
                :label-width="formLabelWidth"
              >
                <el-input v-model="inputForm.sort" autocomplete="off" clearable>
                </el-input>
              </el-form-item>

              <el-form-item
                label="显示"
                prop="isShow"
                :label-width="formLabelWidth"
              >
                <!-- <el-input
              v-model="inputForm.isShow"
              autocomplete="off"
              clearable
            >
            </el-input> -->
                <el-switch
                  v-model="inputForm.isShow"
                  style="
                    --el-switch-on-color: var(--el-color-primary);
                    --el-switch-off-color: #b5b7ba;
                  "
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-form-item>

              <el-form-item
                label="所属父级"
                prop="parentId"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="inputForm.parentId"
                  autocomplete="off"
                  clearable
                >
                </el-input>
              </el-form-item>

              <el-form-item
                label="分类级别"
                prop="level"
                :label-width="formLabelWidth"
              >
                <el-input :disabled="true"
                  v-model="inputForm.level"
                  autocomplete="off"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-form>

            <div class="bottomBtnBox">
              <el-button :loading="editLoading"
                :icon="'finished'"
                type="primary"
                @click="saveModal()"
              >
                {{ editLoading ? "提交中..." : "保存" }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <drawerModal
      ref="drawerModalRef"
      :drawerTitle="'模块' + modalTitle"
      :drawerSize="'30%'"
      :headerBottom="true"
      :loading="loadingModal"
      :showConfirm="modalTitle != '详情'"
      @submit="saveModal"
    >
      <slot>
        <el-form
          ref="formRef"
          :rules="inputRules"
          :model="inputForm"
          :disabled="modalTitle == '详情'"
          :hide-required-asterisk="false"
        >
          <el-form-item
            label="分类名称"
            prop="name"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.name" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
            <el-input v-model="inputForm.sort" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="显示"
            prop="isShow"
            :label-width="formLabelWidth"
          >
            <!-- <el-input
              v-model="inputForm.isShow"
              autocomplete="off"
              clearable
            >
            </el-input> -->
            <el-switch
              v-model="inputForm.isShow"
              style="
                --el-switch-on-color: var(--el-color-primary);
                --el-switch-off-color: #b5b7ba;
              "
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>

          <el-form-item
            label="所属父级"
            prop="parentId"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.parentId" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="分类级别"
            prop="level"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.level" :disabled="true" autocomplete="off" clearable>
            </el-input>
          </el-form-item>
        </el-form>
      </slot>
    </drawerModal>
  </div>
</template>

<script setup>
import cTable from "@/components/common/cTable.vue";
import drawerModal from "@/components/modal/drawer/drawerModal.vue";
import delModel from "@/components/common/modal/delModel.vue";

import {
  ref,
  reactive,
  getCurrentInstance,
  toRefs,
  watch,
  onMounted,
  onBeforeUnmount,
} from "vue";

import { useCategory } from "./category";

const {
  tableLoading,
  tableRef,
  pageData,
  searchForm,
  searchFormRef,

  getList,
  getTree,
  edit,
  del,
  pageSizeChange,
  pageCurrentChange,
  pageSearch,
  pageReset,
  changeStatus,

  drawerModalRef,
  formRef,
  modalTitle,
  saveModal,
  inputForm,
  inputRules,
  formLabelWidth,
  loadingModal,

  showPage,
  switchDraggable,
  changeDrag,

  catTree,
  treeData,
  currentTree,
  treeLoading,
  treeProps,
  expendedKeys,
  nodeClick,
  allowDragNode,
  allowDropNode,
  dropEnd,
  treeHeight,
  treeFormHeight,
  treeEdit,
  editLoading,
  treeEditHandle,
  saveDrag,
} = useCategory();

function onCancel(e) {
  console.log("can-e: ", e);
}

function refreshTable() {
  location.reload();
}
</script>

<style lang="scss" scoped>
@use "@/common";
</style>